<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>时尚商城 - 智能购物体验</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        :root {
            --primary: #e2231a;
            --secondary: #f5f5f5;
            --dark: #333;
            --light: #fff;
            --gray: #999;
            --border: #e0e0e0;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f8f9fa;
            color: var(--dark);
            overflow-x: hidden;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
        }
        
        /* 登录页面样式 */
        .login-container {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 20px;
        }
        
        .login-card {
            background: white;
            border-radius: 16px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            width: 100%;
            max-width: 450px;
            overflow: hidden;
        }
        
        .login-header {
            background: var(--primary);
            color: white;
            padding: 30px 20px;
            text-align: center;
        }
        
        .login-header h2 {
            font-weight: 600;
            margin-bottom: 10px;
        }
        
        .login-body {
            padding: 30px;
        }
        
        .form-control {
            padding: 12px 15px;
            border-radius: 8px;
            border: 1px solid #ddd;
            transition: all 0.3s;
        }
        
        .form-control:focus {
            border-color: var(--primary);
            box-shadow: 0 0 0 3px rgba(226, 35, 26, 0.1);
        }
        
        .password-container {
            position: relative;
        }
        
        .password-toggle {
            position: absolute;
            right: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #777;
            cursor: pointer;
        }
        
        .btn-login {
            background: var(--primary);
            border: none;
            padding: 12px;
            font-size: 16px;
            font-weight: 600;
            border-radius: 8px;
            transition: all 0.3s;
        }
        
        .btn-login:hover {
            background: #c01a13;
            transform: translateY(-2px);
        }
        
        .login-footer {
            text-align: center;
            padding: 20px;
            background: var(--secondary);
            border-top: 1px solid #eee;
        }
        
        .login-footer a {
            color: var(--primary);
            text-decoration: none;
        }
        
        .login-logo {
            font-size: 42px;
            font-weight: 700;
            margin-bottom: 15px;
            color: white;
            letter-spacing: 1px;
        }
        
        .login-logo i {
            margin-right: 10px;
        }
        
        /* 错误消息 */
        .error-message {
            color: #d9534f;
            font-size: 14px;
            margin-top: 5px;
            display: none;
        }
        
        /* 隐藏购物网站内容直到登录 */
        .shopping-site {
            display: none;
        }
        
        /* 顶部通知栏 */
        .top-bar {
            background-color: var(--dark);
            color: var(--light);
            padding: 8px 0;
            font-size: 13px;
        }
        
        .main-header {
            background-color: var(--light);
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: sticky;
            top: 0;
            z-index: 1000;
        }
        
        .logo {
            font-size: 28px;
            font-weight: bold;
            color: var(--primary);
        }
        
        .search-box {
            position: relative;
        }
        
        .search-box input {
            border-radius: 20px;
            padding: 10px 20px;
            border: 2px solid var(--primary);
        }
        
        .search-box button {
            position: absolute;
            right: 5px;
            top: 5px;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 5px 20px;
        }
        
        .header-icons a {
            color: var(--dark);
            font-size: 22px;
            margin-left: 20px;
            position: relative;
            text-decoration: none;
        }
        
        .cart-count {
            position: absolute;
            top: -8px;
            right: -8px;
            background: var(--primary);
            color: white;
            font-size: 12px;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        /* 轮播图 */
        .carousel {
            margin-top: 20px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        .carousel-item img {
            height: 400px;
            object-fit: cover;
        }
        
        /* 分类区域 */
        .category-section {
            margin-top: 30px;
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        
        .category-item {
            text-align: center;
            padding: 15px;
            transition: all 0.3s;
            border-radius: 8px;
        }
        
        .category-item:hover {
            background: var(--secondary);
            transform: translateY(-5px);
        }
        
        .category-item i {
            font-size: 30px;
            color: var(--primary);
            margin-bottom: 10px;
        }
        
        /* 商品卡片 */
        .product-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            transition: all 0.3s;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            height: 100%;
        }
        
        .product-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        
        .product-img {
            height: 200px;
            width: 100%;
            object-fit: contain;
            padding: 15px;
        }
        
        .product-title {
            font-weight: bold;
            font-size: 16px;
            height: 40px;
            overflow: hidden;
        }
        
        .product-price {
            color: var(--primary);
            font-weight: bold;
            font-size: 18px;
        }
        
        .original-price {
            text-decoration: line-through;
            color: var(--gray);
            font-size: 14px;
        }
        
        .discount-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: var(--primary);
            color: white;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
        }
        
        /* 页脚 */
        .footer {
            background: var(--dark);
            color: var(--light);
            padding: 50px 0 20px;
            margin-top: 50px;
        }
        
        .footer-title {
            font-size: 18px;
            margin-bottom: 20px;
            position: relative;
        }
        
        .footer-title::after {
            content: '';
            position: absolute;
            bottom: -8px;
            left: 0;
            width: 40px;
            height: 2px;
            background: var(--primary);
        }
        
        .footer-links a {
            display: block;
            color: var(--gray);
            text-decoration: none;
            margin-bottom: 10px;
            transition: all 0.3s;
        }
        
        .footer-links a:hover {
            color: var(--primary);
            padding-left: 5px;
        }
        
        /* 页面切换效果 */
        .page {
            display: none;
            animation: fadeIn 0.5s;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .active-page {
            display: block;
        }
        
        /* 表单样式 */
        .form-container {
            max-width: 500px;
            background: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            margin: 50px auto;
        }
        
        /* 购物车表格 */
        .cart-table th {
            background: var(--secondary);
        }
        
        .quantity-btn {
            width: 30px;
            height: 30px;
            border: 1px solid #ddd;
            background: white;
            border-radius: 50%;
            cursor: pointer;
        }
        
        .quantity-input {
            width: 50px;
            text-align: center;
            border: 1px solid #ddd;
            height: 30px;
        }
        
        .color-option {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: inline-block;
            margin-right: 10px;
            cursor: pointer;
            border: 2px solid transparent;
        }
        
        .color-option.active {
            border-color: #333;
        }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .carousel-item img {
                height: 250px;
            }
            
            .header-icons a {
                margin-left: 10px;
                font-size: 18px;
            }
        }
        
        .notification {
            position: fixed;
            top: 20px;
            right: 20px;
            padding: 15px 25px;
            background-color: #4CAF50;
            color: white;
            border-radius: 5px;
            z-index: 10000;
            display: none;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        }
        
        .cart-actions {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 20px;
        }
        
        .logout-btn {
            background: none;
            border: none;
            color: #333;
            font-size: 14px;
            cursor: pointer;
            padding: 5px 10px;
            border-radius: 4px;
            transition: all 0.3s;
        }
        
        .logout-btn:hover {
            background: #f8f9fa;
        }
        
        /* 新增样式：订单页面 */
        .order-card {
            background: white;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            margin-bottom: 20px;
        }
        
        .order-header {
            background: var(--secondary);
            padding: 15px 20px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .order-status {
            padding: 5px 12px;
            border-radius: 20px;
            font-size: 14px;
            font-weight: bold;
        }
        
        .status-pending {
            background-color: #ff9800;
            color: white;
        }
        
        .status-completed {
            background-color: #4CAF50;
            color: white;
        }
        
        .order-body {
            padding: 20px;
        }
        
        .order-item {
            display: flex;
            align-items: center;
            padding: 15px 0;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .order-item:last-child {
            border-bottom: none;
        }
        
        .order-item-img {
            width: 80px;
            height: 80px;
            object-fit: contain;
            margin-right: 20px;
            border: 1px solid #f0f0f0;
            border-radius: 5px;
            padding: 5px;
        }
        
        .order-item-info {
            flex: 1;
        }
        
        .order-item-price {
            min-width: 100px;
            text-align: right;
        }
        
        .order-footer {
            padding: 15px 20px;
            background: var(--secondary);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        /* 新增样式：地址页面 */
        .address-list {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .address-card {
            background: white;
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            border: 2px solid transparent;
            transition: all 0.3s;
            position: relative;
        }
        
        .address-card.default {
            border-color: var(--primary);
        }
        
        .address-card-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 15px;
            padding-bottom: 10px;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .address-default-badge {
            background-color: var(--primary);
            color: white;
            padding: 3px 8px;
            border-radius: 3px;
            font-size: 12px;
        }
        
        .address-actions {
            position: absolute;
            top: 15px;
            right: 15px;
            display: flex;
        }
        
        .address-action-btn {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f8f9fa;
            border: 1px solid #e0e0e0;
            margin-left: 8px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .address-action-btn:hover {
            background: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        .address-form {
            background: white;
            border-radius: 10px;
            padding: 25px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        
        .empty-state {
            text-align: center;
            padding: 40px 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        
        .empty-state-icon {
            font-size: 60px;
            color: #e0e0e0;
            margin-bottom: 20px;
        }
        
        /* 标签页样式 */
        .nav-tabs .nav-link {
            border: none;
            border-bottom: 3px solid transparent;
            padding: 12px 20px;
            color: var(--dark);
            font-weight: 500;
        }
        
        .nav-tabs .nav-link.active {
            color: var(--primary);
            border-bottom: 3px solid var(--primary);
            background: transparent;
        }
        
        /* 新增：搜索建议样式 */
        .search-suggestions {
            position: absolute;
            top: 100%;
            left: 0;
            right: 0;
            background: white;
            border: 1px solid #ddd;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            z-index: 100;
            display: none;
            max-height: 300px;
            overflow-y: auto;
        }
        
        .search-suggestions .suggestion-item {
            padding: 10px 15px;
            cursor: pointer;
            transition: all 0.2s;
            border-bottom: 1px solid #f0f0f0;
        }
        
        .search-suggestions .suggestion-item:hover {
            background-color: #f8f9fa;
        }
        
        .search-suggestions .suggestion-item:last-child {
            border-bottom: none;
        }
        
        .search-suggestions .suggestion-item.highlight {
            background-color: #e9f7fe;
        }
        
        /* 新增：搜索历史样式 */
        .search-history {
            background-color: #f9f9f9;
            padding: 10px;
            border-radius: 5px;
            margin-top: 5px;
        }
        
        .search-history .history-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 5px;
        }
        
        .search-history .history-tag {
            display: inline-block;
            background: #e0e0e0;
            border-radius: 15px;
            padding: 3px 10px;
            margin: 3px;
            font-size: 12px;
            cursor: pointer;
        }
        
        .search-history .history-tag:hover {
            background: #d0d0d0;
        }
        
        /* 新增：搜索结果页面样式 */
        .search-results-header {
            background: white;
            padding: 20px;
            border-radius: 10px;
            margin-bottom: 20px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        
        .search-results-count {
            color: #666;
            font-size: 16px;
        }
        
        .no-results {
            text-align: center;
            padding: 50px 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
        }
        
        .no-results-icon {
            font-size: 60px;
            color: #e0e0e0;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <!-- 登录页面 -->
    <div class="login-container" id="loginPage">
        <div class="login-card">
            <div class="login-header">
                <div class="login-logo">
                    <i class="fas fa-shopping-bag"></i>时尚商城
                </div>
                <p>高品质生活购物平台</p>
            </div>
            <div class="login-body">
                <form id="loginForm">
                    <div class="mb-4">
                        <label for="username" class="form-label">用户名</label>
                        <input type="text" class="form-control" id="username" placeholder="请输入用户名" required>
                    </div>
                    
                    <div class="mb-4">
                        <label for="password" class="form-label">密码</label>
                        <div class="password-container">
                            <input type="password" class="form-control" id="password" placeholder="请输入密码" required>
                            <span class="password-toggle" id="togglePassword">
                                <i class="fas fa-eye"></i>
                            </span>
                        </div>
                        <div class="error-message" id="errorMessage">
                            用户名或密码不正确，请重试
                        </div>
                    </div>
                    
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="rememberMe">
                        <label class="form-check-label" for="rememberMe">记住我</label>
                    </div>
                    
                    <button type="submit" class="btn btn-login w-100 text-white">
                        <i class="fas fa-sign-in-alt me-2"></i>登录
                    </button>
                </form>
            </div>
            <div class="login-footer">
                <p>还没有账号？<a href="#" id="registerLink">立即注册</a></p>
            </div>
        </div>
    </div>
    
    <!-- 购物网站内容 (默认隐藏) -->
    <div class="shopping-site" id="shoppingSite">
        <!-- 通知弹窗 -->
        <div class="notification" id="notification">商品已添加到购物车！</div>
        
        <!-- 顶部通知栏 -->
        <div class="top-bar">
            <div class="container d-flex justify-content-between">
                <div>欢迎来到时尚商城！新用户注册即送200元优惠券</div>
                <div>
                    <span id="userWelcome"></span>
                    <button class="logout-btn ms-3" id="logoutBtn">
                        <i class="fas fa-sign-out-alt me-1"></i>退出
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 主头部 -->
        <header class="main-header py-3">
            <div class="container">
                <div class="row align-items-center">
                    <div class="col-lg-3 col-md-4 col-6">
                        <div class="logo">时尚商城</div>
                    </div>
                    <div class="col-lg-6 col-md-5 d-none d-md-block">
                        <div class="search-box">
                            <input type="text" class="form-control" id="searchInput" placeholder="搜索商品...">
                            <button class="btn" id="searchButton"><i class="fas fa-search"></i> 搜索</button>
                            <div class="search-suggestions" id="searchSuggestions">
                                <!-- 搜索建议将动态填充 -->
                            </div>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-3 col-6 text-end">
                        <div class="header-icons d-inline-block">
                            <a href="#" onclick="showPage('profile')"><i class="fas fa-user"></i></a>
                            <a href="#" onclick="showPage('cart')">
                                <i class="fas fa-shopping-cart"></i>
                                <span class="cart-count" id="cartCount">0</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </header>
        
        <!-- 主导航 -->
        <nav class="navbar navbar-expand-lg navbar-light bg-light py-2">
            <div class="container">
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="mainNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item"><a class="nav-link active" href="#" onclick="showPage('home')">首页</a></li>
                        <li class="nav-item"><a class="nav-link" href="#" onclick="searchByCategory('手机')">手机</a></li>
                        <li class="nav-item"><a class="nav-link" href="#" onclick="searchByCategory('电脑')">电脑</a></li>
                        <li class="nav-item"><a class="nav-link" href="#" onclick="searchByCategory('家电')">家电</a></li>
                        <li class="nav-item"><a class="nav-link" href="#" onclick="searchByCategory('服饰')">服饰</a></li>
                        <li class="nav-item"><a class="nav-link" href="#" onclick="searchByCategory('食品')">食品</a></li>
                        <li class="nav-item"><a class="nav-link" href="#" onclick="searchByCategory('美妆')">美妆</a></li>
                        <li class="nav-item"><a class="nav-link" href="#" onclick="searchByCategory('图书')">图书</a></li>
                    </ul>
                    <div class="d-md-none">
                        <div class="search-box">
                            <input type="text" class="form-control" id="mobileSearchInput" placeholder="搜索商品...">
                            <button class="btn btn-sm" id="mobileSearchButton"><i class="fas fa-search"></i></button>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
        
        <!-- 页面容器 -->
        <div class="container my-5">
            <!-- 首页 -->
            <div id="home" class="page active-page">
                <!-- 轮播图 -->
                <div id="mainCarousel" class="carousel slide" data-bs-ride="carousel">
                    <div class="carousel-indicators">
                        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="0" class="active"></button>
                        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="1"></button>
                        <button type="button" data-bs-target="#mainCarousel" data-bs-slide-to="2"></button>
                    </div>
                    <div class="carousel-inner">
                        <div class="carousel-item active">
                            <img src="https://images.unsplash.com/photo-1607082350899-7e105aa886ae?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="d-block w-100" alt="促销活动">
                            <div class="carousel-caption d-none d-md-block">
                                <h3>夏季大促销</h3>
                                <p>全场低至5折，新品上市</p>
                            </div>
                        </div>
                        <div class="carousel-item">
                            <img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="d-block w-100" alt="电子产品">
                        </div>
                        <div class="carousel-item">
                            <img src="https://images.unsplash.com/photo-1483985988355-763728e1935b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" class="d-block w-100" alt="时尚服饰">
                        </div>
                    </div>
                    <button class="carousel-control-prev" type="button" data-bs-target="#mainCarousel" data-bs-slide="prev">
                        <span class="carousel-control-prev-icon"></span>
                    </button>
                    <button class="carousel-control-next" type="button" data-bs-target="#mainCarousel" data-bs-slide="next">
                        <span class="carousel-control-next-icon"></span>
                    </button>
                </div>
                
                <!-- 商品分类 -->
                <div class="category-section">
                    <h4 class="mb-4">商品分类</h4>
                    <div class="row text-center">
                        <div class="col-lg-2 col-md-3 col-4 mb-3">
                            <div class="category-item" onclick="searchByCategory('手机')">
                                <i class="fas fa-mobile-alt"></i>
                                <div>手机</div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-3 col-4 mb-3">
                            <div class="category-item" onclick="searchByCategory('电脑')">
                                <i class="fas fa-laptop"></i>
                                <div>电脑</div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-3 col-4 mb-3">
                            <div class="category-item" onclick="searchByCategory('家电')">
                                <i class="fas fa-tv"></i>
                                <div>家电</div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-3 col-4 mb-3">
                            <div class="category-item" onclick="searchByCategory('服饰')">
                                <i class="fas fa-tshirt"></i>
                                <div>服饰</div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-3 col-4 mb-3">
                            <div class="category-item" onclick="searchByCategory('食品')">
                                <i class="fas fa-utensils"></i>
                                <div>食品</div>
                            </div>
                        </div>
                        <div class="col-lg-2 col-md-3 col-4 mb-3">
                            <div class="category-item" onclick="searchByCategory('美妆')">
                                <i class="fas fa-paint-brush"></i>
                                <div>美妆</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 推荐商品 -->
                <div class="mt-5">
                    <div class="d-flex justify-content-between align-items-center mb-4">
                        <h4>热门推荐</h4>
                        <a href="#" class="text-primary">查看更多 <i class="fas fa-angle-right"></i></a>
                    </div>
                    <div class="row">
                        <!-- 商品1 -->
                        <div class="col-lg-3 col-md-4 col-6 mb-4">
                            <div class="product-card">
                                <div class="position-relative">
                                    <img src="https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="product-img" alt="智能手表">
                                    <span class="discount-badge">-20%</span>
                                </div>
                                <div class="p-3">
                                    <div class="product-title">Apple Watch Series 7 智能手表</div>
                                    <div class="d-flex align-items-center mt-2">
                                        <span class="product-price">¥2999</span>
                                        <span class="original-price ms-2">¥3499</span>
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <button class="btn btn-outline-primary btn-sm" onclick="viewProduct(1)">查看详情</button>
                                        <button class="btn btn-primary btn-sm" onclick="addToCart(1)">加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 商品2 -->
                        <div class="col-lg-3 col-md-4 col-6 mb-4">
                            <div class="product-card">
                                <div class="position-relative">
                                    <img src="https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="product-img" alt="运动鞋">
                                    <span class="discount-badge">新品</span>
                                </div>
                                <div class="p-3">
                                    <div class="product-title">Nike Air Max 270 运动鞋</div>
                                    <div class="d-flex align-items-center mt-2">
                                        <span class="product-price">¥899</span>
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <button class="btn btn-outline-primary btn-sm" onclick="viewProduct(2)">查看详情</button>
                                        <button class="btn btn-primary btn-sm" onclick="addToCart(2)">加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 商品3 -->
                        <div class="col-lg-3 col-md-4 col-6 mb-4">
                            <div class="product-card">
                                <div class="position-relative">
                                    <img src="https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="product-img" alt="耳机">
                                </div>
                                <div class="p-3">
                                    <div class="product-title">Sony WH-1000XM4 无线降噪耳机</div>
                                    <div class="d-flex align-items-center mt-2">
                                        <span class="product-price">¥2299</span>
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <button class="btn btn-outline-primary btn-sm" onclick="viewProduct(3)">查看详情</button>
                                        <button class="btn btn-primary btn-sm" onclick="addToCart(3)">加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 商品4 -->
                        <div class="col-lg-3 col-md-4 col-6 mb-4">
                            <div class="product-card">
                                <div class="position-relative">
                                    <img src="https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" class="product-img" alt="电视">
                                    <span class="discount-badge">热卖</span>
                                </div>
                                <div class="p-3">
                                    <div class="product-title">Samsung 75英寸 4K超高清电视</div>
                                    <div class="d-flex align-items-center mt-2">
                                        <span class="product-price">¥8999</span>
                                        <span class="original-price ms-2">¥9999</span>
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <button class="btn btn-outline-primary btn-sm" onclick="viewProduct(4)">查看详情</button>
                                        <button class="btn btn-primary btn-sm" onclick="addToCart(4)">加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 商品详情页 -->
            <div id="product" class="page">
                <!-- 商品详情内容将通过JavaScript动态填充 -->
            </div>
            
            <!-- 购物车页面 -->
            <div id="cart" class="page">
                <h2 class="mb-4">购物车</h2>
                <div class="bg-white p-4 rounded">
                    <div id="cartContent">
                        <!-- 购物车内容将通过JavaScript动态填充 -->
                    </div>
                </div>
            </div>
            
            <!-- 搜索结果页面 -->
            <div id="search-results" class="page">
                <div class="search-results-header">
                    <h3 id="searchResultsTitle">搜索结果</h3>
                    <div class="search-results-count" id="searchResultsCount">找到 <span id="resultsCount">0</span> 件商品</div>
                </div>
                <div class="row" id="searchResultsContent">
                    <!-- 搜索结果将通过JavaScript动态填充 -->
                </div>
            </div>
            
            <!-- 结算页面 -->
            <div id="checkout" class="page">
                <h2 class="mb-4">结算</h2>
                <div class="row">
                    <div class="col-md-8">
                        <div class="bg-white p-4 rounded mb-4">
                            <h4 class="mb-4">收货信息</h4>
                            <form>
                                <div class="row">
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">收货人</label>
                                        <input type="text" class="form-control" value="张三">
                                    </div>
                                    <div class="col-md-6 mb-3">
                                        <label class="form-label">联系电话</label>
                                        <input type="text" class="form-control" value="13800138000">
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">所在地区</label>
                                    <div class="row">
                                        <div class="col-md-4 mb-2">
                                            <select class="form-select">
                                                <option>北京市</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4 mb-2">
                                            <select class="form-select">
                                                <option>市辖区</option>
                                            </select>
                                        </div>
                                        <div class="col-md-4 mb-2">
                                            <select class="form-select">
                                                <option>海淀区</option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">详细地址</label>
                                    <textarea class="form-control" rows="2">中关村大街1号</textarea>
                                </div>
                                <div class="mb-3">
                                    <label class="form-label">邮政编码</label>
                                    <input type="text" class="form-control" value="100000">
                                </div>
                            </form>
                        </div>
                        
                        <div class="bg-white p-4 rounded">
                            <h4 class="mb-4">支付方式</h4>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="payment" id="alipay" checked>
                                <label class="form-check-label" for="alipay">
                                    <i class="fab fa-alipay text-primary me-2"></i> 支付宝支付
                                </label>
                            </div>
                            <div class="form-check mb-3">
                                <input class="form-check-input" type="radio" name="payment" id="wechat">
                                <label class="form-check-label" for="wechat">
                                    <i class="fab fa-weixin text-success me-2"></i> 微信支付
                                </label>
                            </div>
                            <div class="form-check">
                                <input class="form-check-input" type="radio" name="payment" id="bank">
                                <label class="form-check-label" for="bank">
                                    <i class="fas fa-credit-card me-2"></i> 银行卡支付
                                </label>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-4">
                        <div class="bg-white p-4 rounded sticky-top" style="top: 20px;">
                            <h4 class="mb-4">订单信息</h4>
                            <div class="border-bottom pb-3 mb-3">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>商品金额:</span>
                                    <span>¥5298</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>运费:</span>
                                    <span>¥0</span>
                                </div>
                                <div class="d-flex justify-content-between mb-2">
                                    <span>优惠:</span>
                                    <span class="text-success">-¥200</span>
                                </div>
                                <div class="d-flex justify-content-between fw-bold">
                                    <span>应付总额:</span>
                                    <span class="text-danger">¥5098</span>
                                </div>
                            </div>
                            
                            <div class="mb-4">
                                <div class="d-flex justify-content-between mb-2">
                                    <span>可用优惠券:</span>
                                    <a href="#" class="text-primary">选择优惠券</a>
                                </div>
                                <select class="form-select">
                                    <option>无可用优惠券</option>
                                    <option>满3000减200</option>
                                </select>
                            </div>
                            
                            <button class="btn btn-danger w-100" onclick="showPage('payment')">提交订单</button>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 支付页面 -->
            <div id="payment" class="page">
                <div class="row justify-content-center">
                    <div class="col-md-6">
                        <div class="bg-white p-5 rounded text-center">
                            <div class="mb-4">
                                <i class="fas fa-check-circle text-success" style="font-size: 5rem;"></i>
                            </div>
                            <h2 class="mb-3">订单提交成功！</h2>
                            <p class="text-muted mb-4">订单号: <span class="fw-bold">20230605123456789</span></p>
                            <p class="mb-4">应付金额: <span class="text-danger fw-bold fs-4">¥5098</span></p>
                            
                            <div class="border p-4 mb-4">
                                <div class="text-start mb-3">
                                    <h5>支付宝支付</h5>
                                </div>
                                <img src="https://api.qrserver.com/v1/create-qr-code/?size=150x150&data=https://example.com/pay" class="img-fluid mb-3" alt="支付二维码">
                                <p class="text-muted">请使用支付宝扫一扫完成支付</p>
                            </div>
                            
                            <div class="d-flex justify-content-center">
                                <button class="btn btn-outline-secondary me-3" onclick="showPage('home')">继续购物</button>
                                <button class="btn btn-primary" onclick="showPage('profile')">查看订单</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 个人中心 -->
            <div id="profile" class="page">
                <h2 class="mb-4">个人中心</h2>
                <div class="row">
                    <div class="col-md-3">
                        <div class="bg-white p-4 rounded mb-4">
                            <div class="text-center mb-4">
                                <div class="mb-3">
                                    <img src="https://randomuser.me/api/portraits/men/32.jpg" class="rounded-circle" width="100" alt="头像">
                                </div>
                                <h5>LiamZyan</h5>
                                <div class="text-muted">普通会员</div>
                            </div>
                            
                            <div class="list-group">
                                <a href="#" class="list-group-item list-group-item-action" onclick="showProfileSection('profile-info')">
                                    <i class="fas fa-user me-2"></i> 个人资料
                                </a>
                                <a href="#" class="list-group-item list-group-item-action" onclick="showProfileSection('orders')">
                                    <i class="fas fa-box me-2"></i> 我的订单
                                </a>
                                <a href="#" class="list-group-item list-group-item-action" onclick="showProfileSection('addresses')">
                                    <i class="fas fa-map-marker-alt me-2"></i> 收货地址
                                </a>
                                <a href="#" class="list-group-item list-group-item-action" onclick="showProfileSection('wishlist')">
                                    <i class="fas fa-heart me-2"></i> 我的收藏
                                </a>
                                <a href="#" class="list-group-item list-group-item-action" onclick="showProfileSection('reviews')">
                                    <i class="fas fa-comment me-2"></i> 我的评价
                                </a>
                                <a href="#" class="list-group-item list-group-item-action" onclick="showProfileSection('settings')">
                                    <i class="fas fa-cog me-2"></i> 账户设置
                                </a>
                            </div>
                        </div>
                    </div>
                    
                    <div class="col-md-9">
                        <!-- 个人资料部分 -->
                        <div id="profile-info" class="profile-section">
                            <div class="bg-white p-4 rounded">
                                <h4 class="mb-4">个人资料</h4>
                                <form>
                                    <div class="row mb-3">
                                        <label class="col-md-3 col-form-label">用户名</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" value="LiamZyan">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-md-3 col-form-label">昵称</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" value="23级网络工程三班郑毛量智">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-md-3 col-form-label">邮箱</label>
                                        <div class="col-md-9">
                                            <input type="email" class="form-control" value="LiamZyan@example.com">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-md-3 col-form-label">手机号</label>
                                        <div class="col-md-9">
                                            <input type="text" class="form-control" value="2321220323">
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-md-3 col-form-label">性别</label>
                                        <div class="col-md-9">
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="gender" id="male" checked>
                                                <label class="form-check-label" for="male">男</label>
                                            </div>
                                            <div class="form-check form-check-inline">
                                                <input class="form-check-input" type="radio" name="gender" id="female">
                                                <label class="form-check-label" for="female">女</label>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="row mb-3">
                                        <label class="col-md-3 col-form-label">生日</label>
                                        <div class="col-md-9">
                                            <input type="date" class="form-control" value="2003-01-14">
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-9 offset-md-3">
                                            <button type="submit" class="btn btn-primary">保存修改</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                        
                        <!-- 我的订单部分 -->
                        <div id="orders" class="profile-section" style="display: none;">
                            <div class="bg-white p-4 rounded">
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <h4>我的订单</h4>
                                    <div>
                                        <ul class="nav nav-tabs">
                                            <li class="nav-item">
                                                <a class="nav-link active" href="#" onclick="filterOrders('all')">全部订单</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#" onclick="filterOrders('pending')">待付款</a>
                                            </li>
                                            <li class="nav-item">
                                                <a class="nav-link" href="#" onclick="filterOrders('completed')">已完成</a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                
                                <div id="ordersContent">
                                    <!-- 订单内容将通过JavaScript动态填充 -->
                                </div>
                            </div>
                        </div>
                        
                        <!-- 收货地址部分 -->
                        <div id="addresses" class="profile-section" style="display: none;">
                            <div class="bg-white p-4 rounded">
                                <div class="d-flex justify-content-between align-items-center mb-4">
                                    <h4>收货地址</h4>
                                    <button class="btn btn-primary" onclick="showAddressForm()">
                                        <i class="fas fa-plus me-1"></i> 添加新地址
                                    </button>
                                </div>
                                
                                <div id="addressesContent">
                                    <!-- 地址内容将通过JavaScript动态填充 -->
                                </div>
                                
                                <div id="addressForm" class="address-form mt-4" style="display: none;">
                                    <h5 class="mb-4" id="addressFormTitle">添加新地址</h5>
                                    <form id="addressEditForm">
                                        <input type="hidden" id="editAddressId">
                                        <div class="row mb-3">
                                            <div class="col-md-6">
                                                <label class="form-label">收货人</label>
                                                <input type="text" class="form-control" id="addressName" required>
                                            </div>
                                            <div class="col-md-6">
                                                <label class="form-label">联系电话</label>
                                                <input type="text" class="form-control" id="addressPhone" required>
                                            </div>
                                        </div>
                                        <div class="row mb-3">
                                            <div class="col-md-4">
                                                <label class="form-label">省份</label>
                                                <select class="form-select" id="addressProvince" required>
                                                    <option value="">请选择</option>
                                                    <option value="北京市">北京市</option>
                                                    <option value="上海市">上海市</option>
                                                    <option value="广东省">广东省</option>
                                                    <option value="江苏省">江苏省</option>
                                                    <option value="浙江省">浙江省</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label">城市</label>
                                                <select class="form-select" id="addressCity" required>
                                                    <option value="">请选择</option>
                                                    <option value="北京市">北京市</option>
                                                    <option value="上海市">上海市</option>
                                                    <option value="广州市">广州市</option>
                                                    <option value="深圳市">深圳市</option>
                                                    <option value="杭州市">杭州市</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <label class="form-label">区/县</label>
                                                <select class="form-select" id="addressDistrict" required>
                                                    <option value="">请选择</option>
                                                    <option value="海淀区">海淀区</option>
                                                    <option value="朝阳区">朝阳区</option>
                                                    <option value="浦东新区">浦东新区</option>
                                                    <option value="天河区">天河区</option>
                                                    <option value="西湖区">西湖区</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">详细地址</label>
                                            <textarea class="form-control" id="addressDetail" rows="2" required></textarea>
                                        </div>
                                        <div class="mb-3">
                                            <label class="form-label">邮政编码</label>
                                            <input type="text" class="form-control" id="addressPostal">
                                        </div>
                                        <div class="mb-4 form-check">
                                            <input type="checkbox" class="form-check-input" id="addressDefault">
                                            <label class="form-check-label" for="addressDefault">设为默认地址</label>
                                        </div>
                                        <div class="d-flex justify-content-end">
                                            <button type="button" class="btn btn-outline-secondary me-2" onclick="hideAddressForm()">取消</button>
                                            <button type="submit" class="btn btn-primary">保存地址</button>
                                        </div>
                                    </form>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 其他部分（收藏、评价、设置） -->
                        <div id="wishlist" class="profile-section" style="display: none;">
                            <div class="bg-white p-4 rounded">
                                <h4 class="mb-4">我的收藏</h4>
                                <p class="text-muted">您还没有收藏任何商品。</p>
                            </div>
                        </div>
                        
                        <div id="reviews" class="profile-section" style="display: none;">
                            <div class="bg-white p-4 rounded">
                                <h4 class="mb-4">我的评价</h4>
                                <p class="text-muted">您还没有发表过评价。</p>
                            </div>
                        </div>
                        
                        <div id="settings" class="profile-section" style="display: none;">
                            <div class="bg-white p-4 rounded">
                                <h4 class="mb-4">账户设置</h4>
                                <p class="text-muted">账户安全设置功能正在开发中。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <footer class="footer">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                        <div class="footer-title">关于我们</div>
                        <p class="text-muted">时尚商城致力于为消费者提供高品质的商品和优质的服务，打造值得信赖的购物平台。</p>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                        <div class="footer-title">购物指南</div>
                        <div class="footer-links">
                            <a href="#">购物流程</a>
                            <a href="#">会员介绍</a>
                            <a href="#">常见问题</a>
                            <a href="#">联系客服</a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 mb-4 mb-md-0">
                        <div class="footer-title">配送方式</div>
                        <div class="footer-links">
                            <a href="#">上门自提</a>
                            <a href="#">211限时达</a>
                            <a href="#">配送服务查询</a>
                            <a href="#">配送费收取标准</a>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6">
                        <div class="footer-title">关注我们</div>
                        <div class="d-flex">
                            <a href="#" class="me-3 text-white"><i class="fab fa-weixin fa-2x"></i></a>
                            <a href="#" class="me-3 text-white"><i class="fab fa-weibo fa-2x"></i></a>
                            <a href="#" class="text-white"><i class="fab fa-qq fa-2x"></i></a>
                        </div>
                        <div class="mt-3">
                            <h5>客服热线</h5>
                            <h3 class="text-danger">400-123-4567</h3>
                        </div>
                    </div>
                </div>
                <div class="text-center mt-5 pt-4 border-top text-muted">
                    <p>© 2023 时尚商城 版权所有 | 隐私政策 | 使用条款</p>
                    <p>京ICP备12345678号 | 食品经营许可证：JY1234567890</p>
                </div>
            </div>
        </footer>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        // 用户登录状态管理
        const PASSWORD = "password123"; // 预设密码
        
        // 检查是否已登录
        function checkLoginStatus() {
            const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
            if (isLoggedIn) {
                const username = localStorage.getItem('username') || '用户';
                document.getElementById('userWelcome').textContent = `欢迎回来，${username}！`;
                document.getElementById('loginPage').style.display = 'none';
                document.getElementById('shoppingSite').style.display = 'block';
                
                // 初始化个人中心数据
                initProfileData();
                
                // 初始化搜索历史
                initSearchHistory();
            }
        }
        
        // 初始化搜索历史
        function initSearchHistory() {
            if (!localStorage.getItem('searchHistory')) {
                localStorage.setItem('searchHistory', JSON.stringify([]));
            }
        }
        
        // 添加搜索历史
        function addSearchHistory(term) {
            if (!term) return;
            
            const history = JSON.parse(localStorage.getItem('searchHistory')) || [];
            
            // 如果已存在则先移除
            const index = history.indexOf(term);
            if (index !== -1) {
                history.splice(index, 1);
            }
            
            // 添加到开头
            history.unshift(term);
            
            // 最多保留10条记录
            if (history.length > 10) {
                history.pop();
            }
            
            localStorage.setItem('searchHistory', JSON.stringify(history));
        }
        
        // 获取搜索历史
        function getSearchHistory() {
            return JSON.parse(localStorage.getItem('searchHistory')) || [];
        }
        
        // 初始化个人中心数据
        function initProfileData() {
            // 初始化订单数据
            if (!localStorage.getItem('orders')) {
                const orders = [
                    {
                        id: 'ORD20230610001',
                        date: '2023-06-10',
                        items: [
                            { id: 1, name: "Apple Watch Series 7 智能手表", price: 2999, quantity: 1, image: "https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" },
                            { id: 3, name: "Sony WH-1000XM4 无线降噪耳机", price: 2299, quantity: 1, image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" }
                        ],
                        total: 5298,
                        status: 'completed'
                    },
                    {
                        id: 'ORD20230610002',
                        date: '2023-06-09',
                        items: [
                            { id: 2, name: "Nike Air Max 270 运动鞋", price: 899, quantity: 2, image: "https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" }
                        ],
                        total: 1798,
                        status: 'pending'
                    }
                ];
                localStorage.setItem('orders', JSON.stringify(orders));
            }
            
            // 初始化地址数据
            if (!localStorage.getItem('addresses')) {
                const addresses = [
                    {
                        id: 1,
                        name: "张三",
                        phone: "13800138000",
                        province: "北京市",
                        city: "北京市",
                        district: "海淀区",
                        detail: "中关村大街1号",
                        postal: "100000",
                        isDefault: true
                    },
                    {
                        id: 2,
                        name: "李四",
                        phone: "13900139000",
                        province: "上海市",
                        city: "上海市",
                        district: "浦东新区",
                        detail: "张江高科技园区88号",
                        postal: "201203",
                        isDefault: false
                    }
                ];
                localStorage.setItem('addresses', JSON.stringify(addresses));
            }
        }
        
        // 页面加载时检查登录状态
        document.addEventListener('DOMContentLoaded', function() {
            checkLoginStatus();
            
            // 密码显示/隐藏切换
            document.getElementById('togglePassword').addEventListener('click', function() {
                const passwordInput = document.getElementById('password');
                const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
                passwordInput.setAttribute('type', type);
                this.innerHTML = type === 'password' ? '<i class="fas fa-eye"></i>' : '<i class="fas fa-eye-slash"></i>';
            });
            
            // 登录表单提交
            document.getElementById('loginForm').addEventListener('submit', function(e) {
                e.preventDefault();
                
                const username = document.getElementById('username').value;
                const password = document.getElementById('password').value;
                const rememberMe = document.getElementById('rememberMe').checked;
                const errorMessage = document.getElementById('errorMessage');
                
                if (password === PASSWORD) {
                    // 登录成功
                    localStorage.setItem('isLoggedIn', 'true');
                    localStorage.setItem('username', username);
                    if (rememberMe) {
                        localStorage.setItem('rememberMe', 'true');
                    }
                    
                    document.getElementById('loginPage').style.display = 'none';
                    document.getElementById('shoppingSite').style.display = 'block';
                    document.getElementById('userWelcome').textContent = `欢迎回来，${username}！`;
                    
                    // 初始化个人中心数据
                    initProfileData();
                    // 初始化搜索历史
                    initSearchHistory();
                } else {
                    // 登录失败
                    errorMessage.style.display = 'block';
                    setTimeout(() => {
                        errorMessage.style.display = 'none';
                    }, 3000);
                }
            });
            
            // 退出登录
            document.getElementById('logoutBtn').addEventListener('click', function() {
                localStorage.removeItem('isLoggedIn');
                localStorage.removeItem('username');
                document.getElementById('shoppingSite').style.display = 'none';
                document.getElementById('loginPage').style.display = 'flex';
                document.getElementById('username').value = '';
                document.getElementById('password').value = '';
            });
            
            // 注册链接（演示用途）
            document.getElementById('registerLink').addEventListener('click', function(e) {
                e.preventDefault();
                alert('注册功能即将推出！');
            });
            
            // 搜索按钮点击事件
            document.getElementById('searchButton').addEventListener('click', function() {
                const searchTerm = document.getElementById('searchInput').value.trim();
                if (searchTerm) {
                    performSearch(searchTerm);
                }
            });
            
            // 移动端搜索按钮点击事件
            document.getElementById('mobileSearchButton').addEventListener('click', function() {
                const searchTerm = document.getElementById('mobileSearchInput').value.trim();
                if (searchTerm) {
                    performSearch(searchTerm);
                }
            });
            
            // 搜索框回车事件
            document.getElementById('searchInput').addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    const searchTerm = this.value.trim();
                    if (searchTerm) {
                        performSearch(searchTerm);
                    }
                }
            });
            
            // 移动端搜索框回车事件
            document.getElementById('mobileSearchInput').addEventListener('keyup', function(e) {
                if (e.key === 'Enter') {
                    const searchTerm = this.value.trim();
                    if (searchTerm) {
                        performSearch(searchTerm);
                    }
                }
            });
            
            // 搜索框输入事件（用于建议）
            document.getElementById('searchInput').addEventListener('input', function() {
                showSearchSuggestions(this.value);
            });
            
            // 移动端搜索框输入事件
            document.getElementById('mobileSearchInput').addEventListener('input', function() {
                // 移动端暂时不提供建议
            });
        });
        
        // 商品数据库
        const products = [
            { 
                id: 1, 
                name: "Apple Watch Series 7 智能手表", 
                price: 2999, 
                originalPrice: 3499, 
                image: "https://images.unsplash.com/photo-1546868871-7041f2a55e12?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", 
                description: "更大的显示屏，更窄的边框，全天候视网膜显示屏，始终常亮，更快的充电速度，续航时间长达18小时，更坚固的表镜，抗裂性能更强，IP6X级防尘，防水性能达到50米", 
                category: "智能穿戴设备",
                colors: ["#000", "#f0f0f0", "#e2231a", "#3498db"],
                sizes: ["41mm", "45mm"]
            },
            { 
                id: 2, 
                name: "Nike Air Max 270 运动鞋", 
                price: 899, 
                originalPrice: null, 
                image: "https://images.unsplash.com/photo-1491553895911-0055eca6402d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", 
                description: "经典耐克运动鞋，采用Air Max缓震技术，提供卓越的舒适性和支撑性，适合日常穿着和运动训练", 
                category: "运动鞋",
                colors: ["#000", "#e2231a", "#fff", "#3498db"],
                sizes: ["38", "39", "40", "41", "42"]
            },
            { 
                id: 3, 
                name: "Sony WH-1000XM4 无线降噪耳机", 
                price: 2299, 
                originalPrice: null, 
                image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", 
                description: "高音质无线降噪耳机，配备双噪音传感器技术，智能降噪自适应声音控制，30小时电池续航", 
                category: "耳机",
                colors: ["#000", "#f0f0f0", "#8c8c8c"],
                sizes: ["标准版"]
            },
            { 
                id: 4, 
                name: "Samsung 75英寸 4K超高清电视", 
                price: 8999, 
                originalPrice: 9999, 
                image: "https://images.unsplash.com/photo-1560343090-f0409e92791a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", 
                description: "大屏4K超高清电视，量子点技术，HDR10+，智能电视系统，多视窗功能，内置Alexa语音助手", 
                category: "电视",
                colors: ["#000"],
                sizes: ["75英寸"]
            },
            { 
                id: 5, 
                name: "华为智能手表 GT3", 
                price: 1499, 
                originalPrice: 1699, 
                image: "https://images.unsplash.com/photo-1579586337278-3befd40fd17a?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", 
                description: "14天超长续航，全天候健康监测，支持100+运动模式，高清AMOLED屏幕", 
                category: "智能穿戴设备",
                colors: ["#000", "#f0f0f0"],
                sizes: ["46mm"]
            },
            { 
                id: 6, 
                name: "小米手环 7 Pro", 
                price: 399, 
                originalPrice: null, 
                image: "https://images.unsplash.com/photo-1600348759982-3dce4d1d4d1d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80", 
                description: "1.64英寸AMOLED大屏，全天候血氧监测，心率监测，睡眠监测，117种运动模式", 
                category: "智能穿戴设备",
                colors: ["#000", "#f0f0f0"],
                sizes: ["标准版"]
            }
        ];

        // 购物车数据
        let cart = [];
        
        // 页面切换功能
        function showPage(pageId) {
            $('.page').removeClass('active-page');
            $('#' + pageId).addClass('active-page');
            
            // 如果是购物车页面，重新渲染
            if (pageId === 'cart') {
                renderCart();
            }
        }
        
        // 执行搜索
        function performSearch(term) {
            // 添加搜索历史
            addSearchHistory(term);
            
            // 清空搜索建议
            document.getElementById('searchSuggestions').style.display = 'none';
            
            // 在商品数据库中搜索
            const searchResults = products.filter(product => 
                product.name.toLowerCase().includes(term.toLowerCase()) || 
                product.category.toLowerCase().includes(term.toLowerCase())
            );
            
            // 显示搜索结果页面
            showSearchResults(term, searchResults);
        }
        
        // 按类别搜索
        function searchByCategory(category) {
            document.getElementById('searchInput').value = category;
            performSearch(category);
        }
        
        // 显示搜索结果
        function showSearchResults(term, results) {
            const resultsPage = document.getElementById('search-results');
            const resultsTitle = document.getElementById('searchResultsTitle');
            const resultsCount = document.getElementById('resultsCount');
            const resultsContent = document.getElementById('searchResultsContent');
            
            resultsTitle.textContent = `搜索："${term}"`;
            resultsCount.textContent = results.length;
            
            if (results.length === 0) {
                resultsContent.innerHTML = `
                    <div class="no-results">
                        <div class="no-results-icon">
                            <i class="fas fa-search"></i>
                        </div>
                        <h4>没有找到相关商品</h4>
                        <p class="text-muted">请尝试其他关键词</p>
                        <button class="btn btn-primary mt-3" onclick="showPage('home')">返回首页</button>
                    </div>
                `;
            } else {
                let html = '';
                
                results.forEach(product => {
                    html += `
                        <div class="col-lg-3 col-md-4 col-6 mb-4">
                            <div class="product-card">
                                <div class="position-relative">
                                    <img src="${product.image}" class="product-img" alt="${product.name}">
                                    ${product.originalPrice ? `<span class="discount-badge">-${Math.round((1 - product.price / product.originalPrice) * 100)}%</span>` : ''}
                                </div>
                                <div class="p-3">
                                    <div class="product-title">${product.name}</div>
                                    <div class="d-flex align-items-center mt-2">
                                        <span class="product-price">¥${product.price}</span>
                                        ${product.originalPrice ? `<span class="original-price ms-2">¥${product.originalPrice}</span>` : ''}
                                    </div>
                                    <div class="d-flex justify-content-between mt-3">
                                        <button class="btn btn-outline-primary btn-sm" onclick="viewProduct(${product.id})">查看详情</button>
                                        <button class="btn btn-primary btn-sm" onclick="addToCart(${product.id})">加入购物车</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    `;
                });
                
                resultsContent.innerHTML = html;
            }
            
            showPage('search-results');
        }
        
        // 显示搜索建议
        function showSearchSuggestions(term) {
            if (!term) {
                // 显示搜索历史
                const history = getSearchHistory();
                if (history.length > 0) {
                    let historyHtml = `<div class="search-history">
                        <div class="history-title">搜索历史</div>`;
                    
                    history.forEach(item => {
                        historyHtml += `<span class="history-tag" onclick="document.getElementById('searchInput').value='${item}'; performSearch('${item}')">${item}</span>`;
                    });
                    
                    historyHtml += `</div>`;
                    document.getElementById('searchSuggestions').innerHTML = historyHtml;
                    document.getElementById('searchSuggestions').style.display = 'block';
                } else {
                    document.getElementById('searchSuggestions').style.display = 'none';
                }
                return;
            }
            
            // 获取匹配的建议
            const suggestions = [];
            const termLower = term.toLowerCase();
            
            // 从商品名称和类别中获取建议
            products.forEach(product => {
                if (product.name.toLowerCase().includes(termLower)) {
                    suggestions.push(product.name);
                }
                if (product.category.toLowerCase().includes(termLower)) {
                    suggestions.push(product.category);
                }
            });
            
            // 去重
            const uniqueSuggestions = [...new Set(suggestions)];
            
            // 显示建议
            const suggestionsContainer = document.getElementById('searchSuggestions');
            if (uniqueSuggestions.length > 0) {
                let html = '';
                uniqueSuggestions.forEach(suggestion => {
                    html += `<div class="suggestion-item" onclick="document.getElementById('searchInput').value='${suggestion}'; performSearch('${suggestion}')">${suggestion}</div>`;
                });
                suggestionsContainer.innerHTML = html;
                suggestionsContainer.style.display = 'block';
            } else {
                suggestionsContainer.style.display = 'none';
            }
        }
        
        // 个人中心部分切换
        function showProfileSection(sectionId) {
            // 隐藏所有部分
            document.querySelectorAll('.profile-section').forEach(section => {
                section.style.display = 'none';
            });
            
            // 显示选中的部分
            document.getElementById(sectionId).style.display = 'block';
            
            // 如果是订单部分，渲染订单
            if (sectionId === 'orders') {
                renderOrders('all');
            }
            
            // 如果是地址部分，渲染地址
            if (sectionId === 'addresses') {
                renderAddresses();
            }
        }
        
        // 查看商品详情
        function viewProduct(productId) {
            const product = products.find(p => p.id == productId);
            if (!product) return;
            
            // 构建商品详情页
            const productPage = document.getElementById('product');
            productPage.innerHTML = `
                <div class="row">
                    <div class="col-md-6">
                        <div class="bg-white p-4 rounded mb-4">
                            <img src="${product.image}" class="img-fluid" alt="${product.name}">
                        </div>
                    </div>
                    <div class="col-md-6">
                        <div class="bg-white p-4 rounded">
                            <h2>${product.name}</h2>
                            <div class="text-muted mt-2">${product.category}</div>
                            <div class="d-flex align-items-center mt-3">
                                <div class="bg-danger text-white px-2 py-1 rounded me-2">新品</div>
                                <div class="text-warning">
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star"></i>
                                    <i class="fas fa-star-half-alt"></i>
                                    <span class="text-muted ms-2">(1289条评价)</span>
                                </div>
                            </div>
                            
                            <div class="mt-4 border-top pt-3">
                                <h3 class="text-danger">¥${product.price} 
                                    ${product.originalPrice ? `<small class="text-muted text-decoration-line-through">¥${product.originalPrice}</small>` : ''}
                                </h3>
                                <div class="text-success mt-1"><i class="fas fa-tag me-1"></i> 限时优惠，活动结束恢复原价</div>
                            </div>
                            
                            <div class="mt-4">
                                ${product.sizes.length > 1 ? `
                                <h5>规格选择</h5>
                                <div class="d-flex mt-2">
                                    ${product.sizes.map((size, index) => `
                                        <div class="form-check me-3">
                                            <input class="form-check-input" type="radio" name="size" id="size${index}" ${index === 0 ? 'checked' : ''}>
                                            <label class="form-check-label" for="size${index}">${size}</label>
                                        </div>
                                    `).join('')}
                                </div>
                                ` : ''}
                                
                                <div class="mt-3">
                                    <h5>颜色选择</h5>
                                    <div class="d-flex mt-2">
                                        ${product.colors.map((color, index) => `
                                            <div class="color-option me-2 ${index === 0 ? 'active' : ''}" 
                                                style="background-color: ${color}; border: ${color === '#f0f0f0' ? '1px solid #ddd' : 'none'}"
                                                onclick="selectColor(this)">
                                            </div>
                                        `).join('')}
                                    </div>
                                </div>
                                
                                <div class="mt-4 d-flex align-items-center">
                                    <div class="d-flex align-items-center me-4">
                                        <button class="quantity-btn" onclick="changeQuantity(this, -1)">-</button>
                                        <input type="text" class="quantity-input mx-2" value="1">
                                        <button class="quantity-btn" onclick="changeQuantity(this, 1)">+</button>
                                    </div>
                                    <button class="btn btn-danger me-2" onclick="addToCart(${product.id})"><i class="fas fa-shopping-cart me-1"></i> 加入购物车</button>
                                    <button class="btn btn-outline-danger" onclick="addToCart(${product.id}, true)">立即购买</button>
                                </div>
                            </div>
                        </div>
                        
                        <div class="bg-white p-4 rounded mt-4">
                            <h5>商品详情</h5>
                            <ul class="mt-3">
                                ${product.description.split('，').map(feature => `<li>${feature}</li>`).join('')}
                            </ul>
                        </div>
                    </div>
                </div>
            `;
            
            showPage('product');
        }
        
        // 选择颜色
        function selectColor(element) {
            const colorOptions = element.parentElement.querySelectorAll('.color-option');
            colorOptions.forEach(option => option.classList.remove('active'));
            element.classList.add('active');
        }
        
        // 改变数量
        function changeQuantity(button, change) {
            const container = button.parentElement;
            const input = container.querySelector('.quantity-input');
            let value = parseInt(input.value) || 1;
            value += change;
            if (value < 1) value = 1;
            if (value > 99) value = 99;
            input.value = value;
        }
        
        // 添加商品到购物车
        function addToCart(productId, checkout = false) {
            const product = products.find(p => p.id == productId);
            if (!product) return;
            
            // 查找购物车中是否已有该商品
            const existingItem = cart.find(item => item.id == productId);
            
            if (existingItem) {
                existingItem.quantity += 1;
            } else {
                cart.push({
                    id: product.id,
                    name: product.name,
                    price: product.price,
                    image: product.image,
                    quantity: 1
                });
            }
            
            // 更新购物车
            updateCart();
            
            // 显示通知
            showNotification('商品已添加到购物车！');
            
            // 如果点击的是立即购买按钮，跳转到结算页面
            if (checkout) {
                showPage('checkout');
            }
        }
        
        // 更新购物车
        function updateCart() {
            // 更新购物车图标数量
            const totalCount = cart.reduce((sum, item) => sum + item.quantity, 0);
            document.getElementById('cartCount').textContent = totalCount;
            
            // 更新购物车页面
            renderCart();
        }
        
        // 渲染购物车
        function renderCart() {
            const cartContent = document.getElementById('cartContent');
            if (!cartContent) return;
            
            if (cart.length === 0) {
                cartContent.innerHTML = `
                    <div class="text-center py-5">
                        <i class="fas fa-shopping-cart fa-4x text-muted mb-3"></i>
                        <h4>购物车是空的</h4>
                        <p class="text-muted">快去添加一些商品吧</p>
                        <button class="btn btn-primary mt-3" onclick="showPage('home')">去逛逛</button>
                    </div>
                `;
                return;
            }
            
            let total = 0;
            let html = `
                <div class="table-responsive">
                    <table class="table cart-table">
                        <thead>
                            <tr>
                                <th>商品信息</th>
                                <th>单价</th>
                                <th>数量</th>
                                <th>小计</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
            `;
            
            cart.forEach(item => {
                const subtotal = item.price * item.quantity;
                total += subtotal;
                
                html += `
                    <tr id="cart-item-${item.id}">
                        <td>
                            <div class="d-flex">
                                <div class="me-3">
                                    <img src="${item.image}" width="80" alt="${item.name}">
                                </div>
                                <div>
                                    <div class="fw-bold">${item.name}</div>
                                </div>
                            </div>
                        </td>
                        <td>¥${item.price}</td>
                        <td>
                            <div class="d-flex align-items-center">
                                <button class="quantity-btn" onclick="updateCartItemQuantity(${item.id}, -1)">-</button>
                                <input type="text" class="quantity-input mx-2" value="${item.quantity}" 
                                    onchange="updateCartItemQuantity(${item.id}, 0, this.value)" 
                                    onkeyup="this.value=this.value.replace(/\D/g,'')">
                                <button class="quantity-btn" onclick="updateCartItemQuantity(${item.id}, 1)">+</button>
                            </div>
                        </td>
                        <td>¥${subtotal}</td>
                        <td><button class="btn btn-link text-danger" onclick="removeCartItem(${item.id})"><i class="fas fa-trash"></i></button></td>
                    </tr>
                `;
            });
            
            html += `
                        </tbody>
                    </table>
                </div>
                
                <div class="d-flex justify-content-end mt-4">
                    <div class="bg-light p-4 rounded" style="width: 300px;">
                        <div class="d-flex justify-content-between mb-2">
                            <span>商品合计:</span>
                            <span>¥${total}</span>
                        </div>
                        <div class="d-flex justify-content-between mb-2">
                            <span>运费:</span>
                            <span>¥0</span>
                        </div>
                        <div class="d-flex justify-content-between mb-3 fw-bold">
                            <span>总计:</span>
                            <span class="text-danger">¥${total}</span>
                        </div>
                        <button class="btn btn-danger w-100" onclick="showPage('checkout')">去结算</button>
                    </div>
                </div>
                
                <div class="cart-actions mt-4">
                    <button class="btn btn-outline-secondary" onclick="showPage('home')">继续购物</button>
                    <button class="btn btn-outline-danger" onclick="clearCart()">清空购物车</button>
                </div>
            `;
            
            cartContent.innerHTML = html;
        }
        
        // 更新购物车商品数量
        function updateCartItemQuantity(productId, change, newValue = null) {
            const item = cart.find(item => item.id == productId);
            if (!item) return;
            
            if (newValue !== null) {
                item.quantity = parseInt(newValue) || 1;
            } else {
                item.quantity += change;
            }
            
            if (item.quantity < 1) item.quantity = 1;
            if (item.quantity > 99) item.quantity = 99;
            
            updateCart();
        }
        
        // 从购物车移除商品
        function removeCartItem(productId) {
            cart = cart.filter(item => item.id != productId);
            updateCart();
        }
        
        // 清空购物车
        function clearCart() {
            if (confirm('确定要清空购物车吗？')) {
                cart = [];
                updateCart();
            }
        }
        
        // 显示通知
        function showNotification(message) {
            const notification = document.getElementById('notification');
            notification.textContent = message;
            notification.style.display = 'block';
            
            setTimeout(() => {
                notification.style.display = 'none';
            }, 3000);
        }
        
        // 渲染订单
        function renderOrders(filter = 'all') {
            const ordersContent = document.getElementById('ordersContent');
            if (!ordersContent) return;
            
            const orders = JSON.parse(localStorage.getItem('orders')) || [];
            
            // 根据筛选条件过滤订单
            let filteredOrders = orders;
            if (filter === 'pending') {
                filteredOrders = orders.filter(order => order.status === 'pending');
            } else if (filter === 'completed') {
                filteredOrders = orders.filter(order => order.status === 'completed');
            }
            
            if (filteredOrders.length === 0) {
                ordersContent.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="fas fa-box-open"></i>
                        </div>
                        <h4>暂无订单</h4>
                        <p class="text-muted">您还没有相关的订单记录</p>
                        <button class="btn btn-primary mt-3" onclick="showPage('home')">去购物</button>
                    </div>
                `;
                return;
            }
            
            let html = '';
            
            filteredOrders.forEach(order => {
                html += `
                    <div class="order-card">
                        <div class="order-header">
                            <div>
                                <span class="fw-bold">订单号: ${order.id}</span>
                                <span class="text-muted ms-3">${order.date}</span>
                            </div>
                            <div>
                                <span class="order-status ${order.status === 'pending' ? 'status-pending' : 'status-completed'}">
                                    ${order.status === 'pending' ? '待付款' : '已完成'}
                                </span>
                            </div>
                        </div>
                        <div class="order-body">
                            ${order.items.map(item => `
                                <div class="order-item">
                                    <img src="${item.image}" class="order-item-img" alt="${item.name}">
                                    <div class="order-item-info">
                                        <div class="fw-bold">${item.name}</div>
                                        <div class="text-muted">数量: ${item.quantity}</div>
                                    </div>
                                    <div class="order-item-price">
                                        ¥${item.price * item.quantity}
                                    </div>
                                </div>
                            `).join('')}
                        </div>
                        <div class="order-footer">
                            <div>
                                <span class="text-muted">共 ${order.items.length} 件商品</span>
                            </div>
                            <div>
                                <span class="me-3">合计: <span class="fw-bold text-danger">¥${order.total}</span></span>
                                ${order.status === 'pending' ? `
                                    <button class="btn btn-sm btn-danger">立即支付</button>
                                    <button class="btn btn-sm btn-outline-secondary">取消订单</button>
                                ` : `
                                    <button class="btn btn-sm btn-outline-secondary">再次购买</button>
                                    <button class="btn btn-sm btn-outline-secondary">评价</button>
                                `}
                            </div>
                        </div>
                    </div>
                `;
            });
            
            ordersContent.innerHTML = html;
        }
        
        // 筛选订单
        function filterOrders(status) {
            // 更新标签状态
            document.querySelectorAll('.nav-tabs .nav-link').forEach(tab => {
                tab.classList.remove('active');
            });
            event.target.classList.add('active');
            
            // 渲染订单
            renderOrders(status);
        }
        
        // 渲染地址
        function renderAddresses() {
            const addressesContent = document.getElementById('addressesContent');
            if (!addressesContent) return;
            
            const addresses = JSON.parse(localStorage.getItem('addresses')) || [];
            
            if (addresses.length === 0) {
                addressesContent.innerHTML = `
                    <div class="empty-state">
                        <div class="empty-state-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <h4>暂无收货地址</h4>
                        <p class="text-muted">请添加您的收货地址</p>
                        <button class="btn btn-primary mt-3" onclick="showAddressForm()">添加地址</button>
                    </div>
                `;
                return;
            }
            
            let html = `
                <div class="address-list">
                    ${addresses.map(address => `
                        <div class="address-card ${address.isDefault ? 'default' : ''}">
                            <div class="address-card-header">
                                <h5>${address.name}</h5>
                                ${address.isDefault ? '<span class="address-default-badge">默认地址</span>' : ''}
                            </div>
                            <div class="address-info">
                                <p class="mb-1">${address.phone}</p>
                                <p class="mb-0">${address.province} ${address.city} ${address.district} ${address.detail}</p>
                                <p class="mb-0">${address.postal}</p>
                            </div>
                            <div class="address-actions">
                                <div class="address-action-btn" onclick="editAddress(${address.id})">
                                    <i class="fas fa-edit"></i>
                                </div>
                                <div class="address-action-btn" onclick="deleteAddress(${address.id})">
                                    <i class="fas fa-trash"></i>
                                </div>
                                ${!address.isDefault ? `
                                    <div class="address-action-btn" onclick="setDefaultAddress(${address.id})">
                                        <i class="fas fa-check-circle"></i>
                                    </div>
                                ` : ''}
                            </div>
                        </div>
                    `).join('')}
                </div>
            `;
            
            addressesContent.innerHTML = html;
        }
        
        // 显示地址表单
        function showAddressForm(addressId = null) {
            const addressForm = document.getElementById('addressForm');
            const addressFormTitle = document.getElementById('addressFormTitle');
            
            if (addressId) {
                // 编辑地址
                addressFormTitle.textContent = '编辑地址';
                
                const addresses = JSON.parse(localStorage.getItem('addresses')) || [];
                const address = addresses.find(a => a.id == addressId);
                
                if (address) {
                    document.getElementById('editAddressId').value = address.id;
                    document.getElementById('addressName').value = address.name;
                    document.getElementById('addressPhone').value = address.phone;
                    document.getElementById('addressProvince').value = address.province;
                    document.getElementById('addressCity').value = address.city;
                    document.getElementById('addressDistrict').value = address.district;
                    document.getElementById('addressDetail').value = address.detail;
                    document.getElementById('addressPostal').value = address.postal;
                    document.getElementById('addressDefault').checked = address.isDefault;
                }
            } else {
                // 添加新地址
                addressFormTitle.textContent = '添加新地址';
                document.getElementById('addressEditForm').reset();
                document.getElementById('editAddressId').value = '';
            }
            
            addressForm.style.display = 'block';
            document.getElementById('addressesContent').style.display = 'none';
        }
        
        // 隐藏地址表单
        function hideAddressForm() {
            document.getElementById('addressForm').style.display = 'none';
            document.getElementById('addressesContent').style.display = 'block';
        }
        
        // 保存地址
        document.getElementById('addressEditForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            const addressId = document.getElementById('editAddressId').value;
            const name = document.getElementById('addressName').value;
            const phone = document.getElementById('addressPhone').value;
            const province = document.getElementById('addressProvince').value;
            const city = document.getElementById('addressCity').value;
            const district = document.getElementById('addressDistrict').value;
            const detail = document.getElementById('addressDetail').value;
            const postal = document.getElementById('addressPostal').value;
            const isDefault = document.getElementById('addressDefault').checked;
            
            let addresses = JSON.parse(localStorage.getItem('addresses')) || [];
            
            if (addressId) {
                // 更新现有地址
                const index = addresses.findIndex(a => a.id == addressId);
                if (index !== -1) {
                    addresses[index] = {
                        id: parseInt(addressId),
                        name,
                        phone,
                        province,
                        city,
                        district,
                        detail,
                        postal,
                        isDefault
                    };
                }
            } else {
                // 添加新地址
                const newId = addresses.length > 0 ? Math.max(...addresses.map(a => a.id)) + 1 : 1;
                addresses.push({
                    id: newId,
                    name,
                    phone,
                    province,
                    city,
                    district,
                    detail,
                    postal,
                    isDefault
                });
            }
            
            // 如果设置为默认地址，取消其他默认地址
            if (isDefault) {
                addresses.forEach(address => {
                    if (address.id != addressId) {
                        address.isDefault = false;
                    }
                });
            }
            
            localStorage.setItem('addresses', JSON.stringify(addresses));
            hideAddressForm();
            renderAddresses();
        });
        
        // 编辑地址
        function editAddress(addressId) {
            showAddressForm(addressId);
        }
        
        // 删除地址
        function deleteAddress(addressId) {
            if (confirm('确定要删除这个地址吗？')) {
                let addresses = JSON.parse(localStorage.getItem('addresses')) || [];
                addresses = addresses.filter(address => address.id != addressId);
                localStorage.setItem('addresses', JSON.stringify(addresses));
                renderAddresses();
            }
        }
        
        // 设置默认地址
        function setDefaultAddress(addressId) {
            let addresses = JSON.parse(localStorage.getItem('addresses')) || [];
            addresses.forEach(address => {
                address.isDefault = (address.id == addressId);
            });
            localStorage.setItem('addresses', JSON.stringify(addresses));
            renderAddresses();
        }
    </script>
</body>
</html>